<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="编辑需求"></u-navbar> -->
		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 110px)" :show-scrollbar="false">
			<view style="background-color: #efede9">
				<view class="pl-2 pr-2 font-14 lineHight-40 font-weight-bold">需求信息</view>
			</view>
			<view class="pl-3">
				<u-form :model="form" ref="uForm">
					<u-form-item :required="true" label-width="150" label="需求标题" prop="title">
						<u-input class="mr-3" v-model="form.title" input-align="right" />
					</u-form-item>
					
					<!-- <u-form-item :required="true" label-width="150" style="padding-right: 10px;" label="产品名称" prop="valueProductName">
						<u-input v-model="valueProductName || form.productName" :type="type" input-align="right"
							:border="false" @click="showListCp = true" />
						<u-action-sheet :list="actionProductName" v-model="showListCp"
							@click="actionClickListCp"></u-action-sheet>
					</u-form-item> -->
					<u-form-item  required label-width="180" label="产品名称" style="padding-right: 10px;"
						prop="productInformId">
						<u-input v-model="valueProductName  || form.productName" placeholder="请选择产品名称" :type="type"
							input-align="right" :border="false" @click="showNatureBusinessHandler" />
						<u-picker @confirm="selectNatureBusiness" mode="selector" v-model="showNatureBusiness"
							:default-selector="[0]" :range="natureBusinessList" range-key="text"></u-picker>
					</u-form-item>
					
					<u-form-item :required="true" label-width="150" label="联系人" prop="legalRepresentative">
						<u-input class="mr-3" :disabled="true"
							v-model="userInfo.legalRepresentative || form.legalRepresentative" input-align="right" />
					</u-form-item>
					<u-form-item :required="true" label-width="150" label="联系方式" prop="phone">
						<u-input class="mr-3" :disabled="true" v-model="userInfo.phone || form.phone"
							input-align="right" />
					</u-form-item>

					<u-form-item :required="true" label-width="150" label="数量" prop="number">
						<u-input class="mr-3" v-model="form.number" input-align="right" />
						<text class="mr-3">{{form.productSpecsText}}</text>
					</u-form-item>
					<u-form-item :required="true" label-width="150" label="价格(元)" prop="price">
						<u-input class="mr-3" :disabled="false" v-model="form.price" input-align="right" />
					</u-form-item>
					<u-form-item :required="true" label-width="150" label="截止日期" prop="endTime">
						<uni-calendar ref="calendar" :start-date="currentDate" :insert="false" :lunar="true" @confirm="confirm" />
						<view v-if="!selectedDate" class="text-999999 right-1-5 position-absolute" @click="open">
						</view>
						<view class="right-1-5 position-absolute" @click="open">{{selectedDate || form.endTime}}</view>
					</u-form-item>
				</u-form>
			</view>
			<ferrButton title="提交需求审批" @click="submit"></ferrButton>
		</scroll-view>
	</view>
</template>

<script>
	import ferrButton from '@/components/free-ui/ferr-button.vue'
	import calendar from '@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue'
	import $H from '@/common/free-lib/request.js'
	export default {
		components: {
			ferrButton,
			calendar,
		},
		data() {
			return {
				form: {
					endTime: '',
					id: '',
					number: 0,
					price: 0,
					productNameId: '',
					title: '',
					legalRepresentative: '',
					phone: '',
					productSpecs: '',
					productSpecsText:''
				},
				value: '',
				valueList: '',

				type: 'select',
				showData: false,
				selectedDate: null,
				show: false,
				showList: false,
				selectedNameDate: null,
				valueProductName: '',
				showProductName: false,

				// 上游订单
				valueListCp: '',
				actionListCp: [],
				showListCp: false,
				border: true,
				labelStyle: {
					paddingLeft: '13px',
					width: '130px',
				},
				details: {},
				actionProductName: [],
			rules: {
			    title: [{
			        required: true,
			        message: '需求标题不能为空',
			        trigger: ['change', 'blur'],
			    }],
				
				number: [
					// {
					// 	required: true,
					// 	message: '数量不能为空',
					// 	trigger: ['change', 'blur'],
					// },
					{
						validator: (rule, value, callback) => {
							// 允许数字和最多两位小数，并且不小于零
							const reg = /^(0|[1-9]\d*)(\.\d{1,2})?$/;
							if (!reg.test(value)) {
								callback(new Error('请输入非负数字，可以有最多两位小数'));
							} else {
								callback();
							}
						},
						trigger: ['change', 'blur'],
					}
				],
				price: [
					// {
					// 	required: true,
					// 	message: '价格不能为空',
					// 	trigger: ['change', 'blur'],
					// },
					{
						validator: (rule, value, callback) => {
							// 允许数字和最多两位小数，并且不小于零
							const reg = /^(0|[1-9]\d*)(\.\d{1,2})?$/;
							if (!reg.test(value)) {
								callback(new Error('请输入非负数字，可以有最多两位小数'));
							} else {
								callback();
							}
						},
						trigger: ['change', 'blur'],
					}
				]
			  
			},
			pages: {
			  pageNo: 1,
			  pageSize: 100,
			  total: 0, // Total records
			},
           
		    showNatureBusiness: false,
		    natureBusinessList: [],
		    

			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		created() {
			this.setCurrentDate();
		},
		onLoad(options) {
			$H.get(
				`/basisInform/productName/list`, {...this.pages}, {
					token: true,
				}
			).then((res) => {
				this.natureBusinessList = (res.result.records || []).map((v) => {
					return {
						text: v.productName,
						id: v.id,
						productSpecs: v.productSpecs,
						productSpecsText: v.productSpecsText,
					}
				})
				const target = this.natureBusinessList.find(
					(v) => v.id === this.form.productNameId
				)
				this.valueProductName = target ? target.text : ''
			})
			this.getUserInfo();
			const id = options.id;
			this.NewListDetail(id)
		},
		methods: {
			selectTab(index) {
				this.currentIndex = index // 更新当前选中的选项卡的索引
			},
			showNatureBusinessHandler() {
				this.showNatureBusiness = true;
			},
			selectNatureBusiness(e) {
				this.valueProductName = this.natureBusinessList[e[0]].text
				this.form.productNameId = this.natureBusinessList[e[0]].id;
				this.productSpecsText = this.natureBusinessList[e[0]].productSpecsText;
				this.productSpecs = this.natureBusinessList[e[0]].productSpecs
			},

			// 上游订单
			open() {
				this.$refs.calendar.open()
			},
			confirm(e) {
				this.selectedDate = e.fulldate;
				// 获取当前的日期
				const formattedDate = e.fulldate; // 只使用日期部分
				this.form.endTime = formattedDate;
			
			},
			setCurrentDate() {
				const now = new Date();
				const year = now.getFullYear();
				const month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份补齐两位数
				const day = now.getDate().toString().padStart(2, '0'); // 日期补齐两位数
				this.currentDate = `${year}-${month}-${day}`;
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let o = {
							...this.form,
							productSpecs:this.form.productSpecs,
							legalRepresentative: this.userInfo.legalRepresentative,
							phone: this.userInfo.phone,
						};
						$H.post(`/down/downMarketDemand/down/edit`, o, {
								token: true,
							})
							.then((res) => {
								if (res.code === 200) {
									uni.showToast({
										title: res.message,
										icon: 'none',
										duration: 3000,
									});
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										});
									}, 3000);
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
								}
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 3000);
							})
							.catch(() => {
								uni.showToast({
									title: res.message,
									icon: 'none',
								})
							})
					} else {
						uni.showToast({
							title: "请完整填写表单",
							icon: 'none'
						});
					}
				});
			},
			NewListDetail(id) {
				$H.get('/down/downMarketDemand/queryById', {
					id: id
				}, {
					token: true,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
					},
				}).then(res => {
					this.form = res.result
				}).catch(error => {
					uni.showToast({
						title: "网络错误，请稍后再试",
						icon: 'none'
					});
				});
			},
			getUserInfo() {
				// 从本地存储中获取用户信息  
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					this.userInfo = userInfo;
				} else {
					// 如果没有用户信息，可能是用户未登录，可以进行相应处理  
					// 例如跳转到登录页面  
				}
			},
		},
	}
</script>

<style></style>